<template>
  <div class="goodslist">
    <van-nav-bar title="传智播客-黑马程序员" />
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="goodsflex">
          <div
            class="goods"
            v-for="v in goodsList"
            :key="v.id"
            @click="$router.push({path:`/goodsDetial/${v.id}`})"
          >
            <img :src="v.img_url" alt />
            <p>{{v.title}}</p>
            <div class="foot">
              <span>￥{{v.sell_price}}</span>&nbsp;&nbsp;&nbsp;
              <span class="del">￥{{v.market_price}}</span>
              <div class="hot">
                <span>热卖中</span>
                <span>剩{{v.stock_quantity}}件</span>
              </div>
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </van-list>
  </div>
</template>

<script>
import { getGoodsList } from "@/apis/goods";
export default {
  data() {
    return {
      goodsList: [],
      pageindex: 1,
      isLoading: true,
      loading: false,
      finished: false,
    };
  },
  methods: {
    onRefresh() {
      this.pageindex = 1;
      this.goodsList = [];
      this.init();
      this.finished = false;

      this.isLoading = false;
    },
    onLoad() {
      // 异步更新数据
      this.pageindex++;
      this.init(this.pageindex);
      this.loading = false;

      // 加载状态结束

      // 数据全部加载完成
    },
    async init() {
      let res = await getGoodsList(this.pageindex);
      console.log(res);
      this.goodsList.push(...res.data.message);
      if (res.data.message.length < 10) {
        this.finished = true;
      }
    },
  },
  async mounted() {
    this.init(this.pageindex);
  },
};
</script>

<style lang="less" scoped>
.goodslist {
  margin: 60px 0 50px;
}
.goodsflex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 6px;
}
.goods {
  width: 48%;
  box-shadow: 0 0 2px 2px #eee;
  margin: 10px 0;
  img {
    width: 98%;
  }
  p {
    height: 42px;
    font-size: 14px;
    text-align: left;
    margin: 6px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 2;
  }
  > div > span {
    font-size: 12px;
    color: red;
  }
  > div > span.del {
    color: rgb(126, 125, 125);
    text-decoration: line-through;
  }
  .foot {
    height: 50px;
    padding-top: 8px;
    background-color: #eee;
  }
  .hot {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 16px;
  }
}
</style>